import {useState} from 'react';
import {View} from '@tarojs/components';
import { useDidShow, useLoad} from '@tarojs/taro';
import { topicNativeList } from '../../utils/jsNative';
import { topicListES6 } from '../../utils/ES6';
import { interviewTopicList } from '../../utils/interview';
import { tsTopicList } from '../../utils/tsLittle';
import { AtButton } from 'taro-ui';
import './index.scss';

const Index = () => {
  const [topic, setTopic] = useState(''); // 题目
  useDidShow(() => {
  })
  useLoad(() => {
    getInterviewTopic();
  })
  // 获取ES6题目
  const getTopicES6 = () => {
    const rand = Math.floor(Math.random() * topicListES6.length);
    setTopic(topicListES6[rand]);
  }
  // 获取原生JS题目
  const getNativeTopic = () => {
    const rand: number = Math.floor(Math.random() * topicNativeList.length);
    setTopic(topicNativeList[rand]);
  }
  // 获取ts题
  const getTsTopic = () => {
    const rand: number = Math.floor(Math.random() * tsTopicList.length);
    setTopic(tsTopicList[rand]);
  }

  // 获取面试题
  const getInterviewTopic = () => {
    const rand: number = Math.floor(Math.random() * interviewTopicList.length);
    setTopic(interviewTopicList[rand]);
  }

  return (
    <View id='index'>
      <div className='result'>{topic}</div>
      <div className='bottom'>
        <AtButton type='primary' circle className='btn' onClick={() => getNativeTopic()}>原生JS</AtButton>
        <AtButton type='primary' className='btn' circle onClick={() => getTopicES6()}>ES6</AtButton>
        <AtButton type='primary' className='btn' circle onClick={() => getTsTopic()}>TS</AtButton>
        <AtButton type='primary' className='btn' circle onClick={() => getInterviewTopic()}>面试题</AtButton>
      </div>
    </View>
  )
}

export default Index;
